<template>
  <div class="star-button-container">
    <button 
      class="github-star-button"
      :class="{ 'starred': isStarred }"
      @click="toggleStar"
      v-if="!isClosed"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <span class="close-button" @click.stop="closeButton">×</span>
      <span class="star-icon">★</span>
      <span class="star-text">{{ isStarred ? 'Starred' : 'Star' }}</span>
      <span class="star-count">{{ starCount }}</span>
    </button>
    <!-- 提示消息元素 -->
    <div class="toast-message" v-if="showToast">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isStarred = ref(false);
const starCount = ref(0);
const isClosed = ref(false);
const showCloseButton = ref(false);
const showToast = ref(false);
const toastMessage = ref('');

// 模拟初始数据（实际项目中替换为 API 调用）
onMounted(() => {
  starCount.value = parseInt(localStorage.getItem('starCount')) || 65; // 默认值
});

const toggleStar = () => {
  isStarred.value = !isStarred.value;
  starCount.value += isStarred.value ? 1 : -1;
  
  // 根据操作显示不同的提示信息
  if (isStarred.value) {
    showToastMessage('您的肯定是我前进的动力 🌟');
  } else {
    showToastMessage('感谢曾经爱过， 我会继续努力的！💪');
  }
  
  // 保存状态（实际项目应调用 API）
  localStorage.setItem('starCount', starCount.value);
};

const closeButton = () => {
  isClosed.value = true;
  // 可选：保存关闭状态
  localStorage.setItem('starButtonClosed', 'true');
};

const handleMouseEnter = () => {
  showCloseButton.value = true;
};

const handleMouseLeave = () => {
  showCloseButton.value = false;
};

// 显示提示消息的函数
const showToastMessage = (message) => {
  toastMessage.value = message;
  showToast.value = true;
  // 3秒后自动隐藏提示消息
  setTimeout(() => {
    showToast.value = false;
  }, 3000);
};
</script>

<style scoped>
.github-star-button {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #24292f;
  background-color: #f6f8fa;
  border: 1px solid rgba(27, 31, 36, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.close-button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background-color: #6a737d;
  color: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: scale(0.8);
  z-index: 10;
}

.github-star-button:hover .close-button {
  opacity: 1;
  transform: scale(1);
}

.close-button:hover {
  background-color: #24292f;
}

/* 容器样式 */
.star-button-container {
  position: relative;
  display: inline-block;
}

/* 提示消息样式 */
.toast-message {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
  min-width: 200px;
  text-align: center;
  z-index: 100;
  animation: slideUp 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
}

/* 向上滑动动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 淡出动画 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.github-star-button:hover {
  background-color: #f3f4f6;
  border-color: rgba(27, 31, 36, 0.3);
}

.github-star-button.starred {
  background-color: #e5f0ff;
  border-color: transparent;
  color: #0969da;
}

.star-icon {
  margin-right: 4px;
  font-size: 16px;
}

.star-count {
  position: relative;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(27, 31, 36, 0.15);
}

/* 数字变化动画 */
.star-count::before {
  content: attr(data-count);
  position: absolute;
  left: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s;
}

.github-star-button:active .star-count::before {
  opacity: 1;
  transform: translateY(0);
}
</style>